<template>
    <div id="note-editor">
        <div class="form-group" v-show="currentNote && typeof currentNote.title !== 'undefined'" transition="expand">
            <input type="text"
                   name="title"
                   class="title form-control"
                   @input="updateNote"
                   v-model="currentNote.title"
                   placeholder="请输入标题"/>
            <textarea name="content"
                      class="form-control"
                      v-model="currentNote.content"
                      @input="updateNote"
                      placeholder="请输入正文"></textarea>
        </div>

        <div v-show="!currentNote || typeof currentNote.title === 'undefined'" class="text-center empty-note" transition="expand">
            <div class="info">请选择笔记</div>
        </div>
    </div>
</template>
<script>
    import { editNote } from '../vuex/action'
    import { activeNote } from '../vuex/getter'
    export default {
        vuex: {
            getters: {
                activeNote
            },
            actions: {
                editNote
            }
        },
        computed: {
            currentNote: activeNote
        },
        methods: {
            updateNote () {
                this.editNote(this.currentNote)
            }
        }
    }
</script>

<style lang="scss" scoped>
    #note-editor{
        height: 100%;
        margin-left: 380px;

        .form-group{
            height: 100%;
            margin-bottom: 0;
        }

        .title{
            border: 0;
            height: 80px;
            font-size: 34px;
        }

        textarea{
            height: calc(100% - 80px);
            border: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;;
            padding-top: 15px;
            resize: none;
            outline: 0;
        }
        .empty-note{
            display: flex;
            justify-content: center;
            height:100%;
            .info {
                align-self: center;
                color: #cccccc;
                font-size: 30px;
            }
        }
    }


    /* 必需 */
    .expand-transition {
        transition: all .3s ease;
        padding: 10px;
        background-color: #eee;
        opacity: 1;
    }

    .expand-enter, .expand-leave {
        padding: 0 10px;
        opacity: 0;
    }

</style>
